<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/vant/index.css">
    <link rel="stylesheet" href="static/element/index.css">
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <!-- Bootstrap Core CSS -->
    <%--    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">--%>
    <%--    <link href="__CDN__/assets/css/index.css" rel="stylesheet">--%>
    <link href="static/bootstrap/bootstrap.min.css" rel="stylesheet">

    <!-- Plugin CSS -->
    <%--    <link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">--%>
    <%--    <link href="https://cdn.staticfile.org/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet">--%>

    <link href="static/font-awesome/font-awesome.min.css" rel="stylesheet">
    <link href="static/simple-line-icons/simple-line-icons.min.css" rel="stylesheet">

    <title>Title</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type='number'] {
            -moz-appearance: textfield;
        }

        .container {
            /*border: solid 1px black;*/
        }

        .header {
            border-bottom: solid 1px white;
            text-align: center;
            font-size: 3.5rem;
            padding: 1rem 0 2rem;
            font-weight: 700;
        }

        .content {
            border: solid 2px white;
            border-radius: 15px;
            margin-top: 25px;
            display: flex;
        }

        .footer {
            min-height: 100px;
            margin-top: 20px;
            border-radius: 15px;
            text-align: center;
        }

        .content > div {
            flex: 1;
            border: solid 1px white;
            border-radius: 15px;
        }

        .right {
            text-align: center;
        }

        .right > img {
            height: 300px;
            width: 200px;
            margin-top: 50px;
            border-radius: 10px;
            border: solid 2px white;
            overflow: hidden;
            padding: 10px;
        }

        .left {
            padding: 30px;
        }

        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        ::-webkit-scrollbar {
            width: 7px;
            height: 7px;
            background-color: #F5F5F5;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        ::-webkit-scrollbar-track {
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            background-color: #F5F5F5;
        }

        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
            background-color: #c8c8c8;
        }

        .user-list-div {
            position: absolute;
            background-color: white;
            color: black;
            z-index: 99;
            left: 87px;
            width: 175px;
            padding: 5px 0;
            max-height: 200px;
            overflow: hidden;
            overflow-y: scroll;
            display: none;
        }

        .user-list-div ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .user-list-div li {
            padding: 4px 0px 2px 13px;
            cursor: pointer;
            font-size: 13px;
        }

        .user-list-div li:hover {
            background-color: #eee;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 145px;
            height: 200px;
            line-height: 200px;
            text-align: center;
        }

        .avatar-uploader-icon2 {
            font-size: 20px;
            color: #8c939d;
            width: 175%;
            height: 127%;
            line-height: 28px;
            text-align: center;
            border: 2px solid #dfdfdf;
            border-radius: 5px
        }

        input[type=file] {
            display: none;
        }

        .fail .layui-layer-content {
            background-color: brown;
            color: #eee;
            width: 450px;
            height: 80px;
            text-align: center;
        }

        .succeed .layui-layer-content {
            background-color: #0061A8;
            color: #eee;
            width: 450px;
            height: 80px;
            text-align: center;
        }

    </style>
</head>
<body style="background-image: url('img/bg.jpg');background-size:100% 100%">
<div id="app">
    <header>
        <div class="container" style="padding: 10px 60px; color:yellow">
            <div class="header"> 智新消费-自助充值平台</div>
            <div style="text-align: center;" v-cloak>
                <div style="margin-top: 20px;color: red;font-weight: 700;font-size: 50px;">暂停充值</div>
                <div style="font-size: 20px;padding: 10px;">
                    <p></p>
                    <p>每月最后三天，线上自助充值平台将暂时关闭休整，如有需要请前往人工充值处办理业务。</p>
                </div>
            </div>
        </div>
    </header>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="./static/vue"></script>
<script type="text/javascript" src="static/axios.min.js"></script>
<script type="text/javascript" src="static/element/index.js"></script>
<script type="text/javascript">
    // import {vant} from "./static/vant/vant.min"
    let vm = new Vue({
            el: '#app',
            data: {
                info: '',
                judd: true,
                tableData: {},
                loading: false,
                czpzh: '',   //--充值凭证号
                cztj: '',    //--充值途径
                czsj: '',     //--充值时间
                czje: '',
                base64: '',
                pbase64: '',
                qrcode: '',
                title: '',
                tip: '',
                zid: '',
                lock: false
            },

            methods: {
                pirceInput() {
                    let str = '' + this.czje
                    if (str.indexOf('.') !== -1) {
                        let arr = str.split('')
                        arr.splice(arr.length - 1)
                        let str2 = arr.join('')
                        this.czje = +str2
                    }
                },

                handBefore(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 0.2;

                    if (!isJPG) {
                        // this.$message.error('上传图片只能是 JPG 格式!');
                        layer.msg('<span style="font-size:24px; line-height: 40px">上传图片只能是 JPG 格式!</span>', {time: 2000, skin: 'fail'});
                        return
                    }
                    if (!isLt2M) {
                        // this.$message.error('上传图片大小不能超过 200k!');
                        layer.msg('<span style="font-size:24px; line-height: 40px">上传图片大小不能超过 200K!</span>', {time: 2000, skin: 'fail'});
                        return
                    }

                    let reader = new FileReader();
                    let self = this
                    //--绑定load事件
                    reader.onload = function (e) {
                        self.pbase64 = e.target.result
                    }
                    //--读取File对象的数据
                    reader.readAsDataURL(file);
                },
                handPreview(file) {
                },
                handleAvatarSuccess(res, file) {
                    this.base64pz = URL.createObjectURL(file.raw);
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 0.5;

                    if (!isJPG) {
                        layer.msg('<span style="font-size:24px; line-height: 40px">上传图片只能是 JPG 格式!</span>', {time: 2000, skin: 'fail'});
                    }
                    if (!isLt2M) {
                        layer.msg('<span style="font-size:24px; line-height: 40px">上传图片大小不能超过 200K!</span>', {time: 2000, skin: 'fail'});
                    }
                    return isJPG && isLt2M;
                },

                fReset() {
                    this.info = ''
                    this.judd = true
                    this.tableData = {}
                    this.loading = false
                    this.czpzh = ''   //--充值凭证号
                    this.cztj = ''    //--充值途径
                    this.czsj = ''     //--充值时间
                    this.czje = ''
                    this.base64 = ''
                    this.pbase64 = ''
                    this.lock = false
                    this.zid = ''
                },

                fSearch() {
                    if (!this.info) {
                        layer.msg('<span style="font-size:24px; line-height: 40px">请输入姓名或者工号!</span>', {time: 2000, skin: 'fail'});
                        return
                    }

                    this.loading = true
                    let self = this
                    let params = new URLSearchParams();
                    params.append('CMD', "53253FBBB71745B68F80AA5BDCDA6617");
                    params.append('VALUE01', this.info);
                    axios.post('/f_wscl/com2', params)
                        .then(function (res) {
                            let {db1} = res.data
                            if (db1[0].VALUE01 === 'ZZ01') {
                                layer.msg('<span style="font-size:24px; line-height: 30px">' + db1[0].VALUE02 + '</span>', {time: 2000, skin: 'fail'});
                            } else if (db1[0].VALUE01 === 'ZZ00') {
                                self.tableData = db1[0]
                                self.base64 = db1[0].VALUE08
                                self.zid = db1[0].VALUE09
                                if (self.base64.indexOf("base64,") === -1) {
                                    self.base64 = "data:image/jpg;base64," + self.base64;
                                }
                            }
                        })
                        .catch(function (error) {
                            layer.msg('网络异常错误', {icon: 1, time: 1000});
                        })
                        .finally(function () {
                            self.loading = false
                        });
                },

                fDo() {
                    if (!this.zid) {
                        layer.msg('<span style="font-size:24px; line-height: 40px">请先正确查询出人员信息!</span>', {time: 2000, skin: 'fail'});
                        return
                    }
                    if (!this.czpzh) {
                        layer.msg('<span style="font-size:24px; line-height: 40px">请输入充值凭证号!</span>', {time: 2000, skin: 'fail'});
                        return
                    }
                    if (!this.czje) {
                        layer.msg('<span style="font-size:24px; line-height: 40px">请输入正确的充值金额!</span>', {time: 2000, skin: 'fail'});
                        return
                    }
                    if (!this.czsj) {
                        layer.msg('<span style="font-size:24px; line-height: 40px">请选择充值的时间!</span>', {time: 2000, skin: 'fail'});
                        return
                    }
                    if (!this.cztj) {
                        layer.msg('<span style="font-size:24px; line-height: 40px">请选择充值途径!</span>', {time: 2000, skin: 'fail'});
                        return
                    }

                    if (parseInt(this.czje) > parseInt(this.tableData.VALUE07)) {
                        layer.msg('<span style="font-size:24px; line-height: 40px">本次充值额超出限定!</span>', {time: 2000, skin: 'fail'});
                        return;
                    }

                    if (!this.lock) {
                        this.lock = true
                        this.loading = true
                        let self = this
                        let params = new URLSearchParams();
                        params.append('CMD', "96DD5DE51CBB444D9EA4AC6E597C28B0");
                        params.append('VALUE01', this.zid);
                        params.append('VALUE02', this.czje);
                        params.append('VALUE03', this.czsj);
                        params.append('VALUE04', this.cztj);
                        params.append('VALUE05', this.czpzh);
                        params.append('VALUE06', this.pbase64);

                        axios.post('/f_wscl/com2', params)
                            .then(function (res) {
                                let {db1} = res.data
                                if (db1[0].VALUE01 === 'ZZ01') {
                                    layer.msg('<span style="font-size:24px; line-height: 30px">' + db1[0].VALUE02 + '</span>', {time: 2000, skin: 'fail'});
                                } else if (db1[0].VALUE01 === 'ZZ00') {
                                    layer.msg('<span style="font-size:24px; line-height: 30px">充值成功!</span>', {time: 2000, skin: 'succeed'}, function () {
                                        let index = parent.layer.getFrameIndex(window.name);
                                        self.fReset();
                                        self.lock = false
                                        parent.layer.close(index);
                                    });
                                }
                            })
                            .catch(function (error) {
                                layer.msg('<span style="font-size:24px; line-height: 30px">网络异常错误!</span>', {time: 1500, skin: 'fail'});
                            }).finally(function () {
                            self.loading = false
                        });
                    }
                },

                fInit() {
                    let self = this
                    let params = new URLSearchParams();
                    params.append('CMD', "BD1127005A814831BEFD841BB1DAD89B");
                    axios.post('/f_wscl/com2', params)
                        .then(function (res) {
                            let {db1, db2, db3} = res.data
                            if (db2[0].VALUE01 === 'ZZ01') {
                                layer.msg('<span style="font-size:24px; line-height: 30px">' + db2[0].VALUE02 + '</span>', {time: 2000, skin: 'fail'});
                            } else {
                                self.title = db1[0].VALUE02
                                self.tip = db1[0].VALUE05
                                self.qrcode = db1[0].VALUE03
                                if (self.qrcode.indexOf("base64,") === -1) {
                                    self.qrcode = "data:image/jpg;base64," + self.qrcode;
                                }

                                self.judd = db3[0].VALUE01 === '1';
                            }
                        })
                        .catch(function (error) {
                            layer.msg('<span style="font-size:24px; line-height: 30px">网络异常错误!</span>', {time: 1500, skin: 'fail'});
                        });
                },

                fExit() {
                    sessionStorage.clear()   //清除所有session值
                    window.location.replace("/f_wscl/login")
                }
            },

            mounted() {

            },

            created() {
                this.fInit()
            }
        })
    ;
</script>
</body>
</html>
